import facecat from "facecat"
import facecat_ws from "facecat_ws"
/*
* 点击方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks:点击次数
*/
let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
    facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
};

/*
* 触摸开始方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
    facecat.onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);	
};

/*
* 触摸移动方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
	facecat.onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);	
};

/*
* 触摸结束方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
*/
let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
	facecat.onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);	
};

let gPaint = new facecat.FCPaint();
let that = null;

// index.js
// 获取应用实例
const app = getApp()
Page({
    data: {
        canvasWidth:0,
        canvasHeight:0,
        facecatStyle:"",
        facecatContent:"",
        facecatFocus:false
      },
      bindInputChange: function(e) {  
        if(gPaint.editingTextBox){
            gPaint.editingTextBox.text = e.detail.value;
            facecat.invalidateView(gPaint.editingTextBox);
            gPaint.editingTextBox = null;
            gPaint.app.setData({
                facecatStyle: "position:absolute;left:0px;top:0px;width:0px;height:0px;display:none;", 
                facecatFocus:false,
                facecatContent:""
             })
        }
      },
  touchStartCanvas: function (e) {
    facecat_ws.handleTouchStart(gPaint, e, onTouchBegin);
  },touchMoveCanvas: function (e) {
    facecat_ws.handleTouchMove(gPaint, e, onTouchMove);
  },touchEndCanvas: function (e) {
    facecat_ws.handleTouchEnd(gPaint, e, onTouchEnd, onClick);
  },
  onLoad() {
      that = this;
    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((cres) => {       
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    canvasWidth: res.windowWidth,  
                    canvasHeight: res.windowHeight
                 })
                cres[0].width = res.windowWidth;
                cres[0].height = res.windowHeight;
            }
        });   
        facecat_ws.scaleCanvas(gPaint, cres);
        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            facecat.onPaintDefault(view, paint, clipRect);
            if (view.viewName == "TabPage") {
                paint.drawLine("rgb(255,0,0)", 1, [], 100, 100, 300, 300);
                paint.drawLine("rgb(255,0,255)", 1, [5, 5], 100, 300, 300, 100);
            } else if (view.viewName == "TabPage2") {
                paint.drawRect("rgb(0,255,0)", 1, [], 100, 100, 200, 200);
                paint.fillRect("rgb(0,255,255)", 250, 250, 350, 350);
            } else if (view.viewName == "TabPage3") {
                paint.drawEllipse("rgb(0,255,255)", 1, [], 100, 100, 200, 200);
                paint.fillEllipse("rgb(255,0,255)", 250, 250, 350, 350);
            } else if (view.viewName == "TabPage4") {
                paint.drawText("FaceCat", "rgb(255,0,0)", "Default,30", 100, 100);
            } else if (view.viewName == "TabPage5") {
                paint.beginPath();
                paint.addLine(100, 100, 150, 120);
                paint.addLine(150, 120, 130, 200);
                paint.addLine(130, 200, 200, 200);
                paint.addLine(200, 200, 250, 220);
                paint.drawPath("rgb(255,0,0)", 1, []);
                paint.closePath();
            } else if (view.viewName == "TabPage6") {
                paint.beginPath();
                paint.addLine(100, 100, 150, 120);
                paint.addLine(150, 120, 200, 200);
                paint.addLine(200, 200, 150, 200);
                paint.fillPath("rgb(0,0,255)");
                paint.closePath();
            }
        };            
        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaintBorder = function (view, paint, clipRect) {
            facecat.onPaintBorderDefault(view, paint, clipRect);
        };
        /*
        * 更新布局的实现方法
        * views:视图集合
        */
        gPaint.onUpdateView = function (views) {
            facecat.updateViewDefault(views);
        }
        //解析加载XML
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
        <html xmlns="facecat">
            <head>
            </head>
            <body>
                <div dock="fill" type="tab" selectedindex="0">
                    <div name="TabPage" text="直线" type="tabpage" headersize="60,20"/>
                    <div name="TabPage2" text="矩形" type="tabpage" headersize="60,20"/>
                    <div name="TabPage3" text="圆" type="tabpage" headersize="60,20"/>
                    <div name="TabPage4" text="文字" type="tabpage" headersize="60,20"/>
                    <div name="TabPage5" text="折线" type="tabpage" headersize="60,20"/>
                    <div name="TabPage6" text="多边形" type="tabpage" headersize="60,20"/>
                </div>
            </body>
        </html>
        `; 
	    facecat_ws.renderFaceCatWeChat(gPaint, xml, that);
    })
  }
})
